<script lang="ts" setup>
import QRCode from 'qrcode';
import AMapLoader from '@amap/amap-jsapi-loader';
import { getCurrentInstance, nextTick } from '@tarojs/taro';
import { onMounted, reactive, shallowRef } from 'vue';
import { QUERY_MY_DETAIL } from '/@/api/modules/visitor/visitor-appointment-record';

const amap = shallowRef<any>(null);

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  code: string;
};

const state = reactive<{
  /**
   * 邀请码验证消息提示
   */
  authMsg: string;
  /**
   * 访客邀约信息
   */
  visitorAppointmentDto: AppSysVisitor.AppointmentDto;
  /**
   * 访客登记信息
   */
  info: AppSysVisitor.Dto;
  qrCodeUrl: string;
}>({
  authMsg: '访客通行码验证中...',
  visitorAppointmentDto: {},
  info: {},
  qrCodeUrl: '',
});

onMounted(() => {
  if (!params.code) {
    state.authMsg = '访客通行码未知！';
  } else {
    QUERY_MY_DETAIL({
      batchNo: params.code,
    }).then((res) => {
      setTimeout(() => {
        state.visitorAppointmentDto = res.visitorAppointmentDto;
        state.info = res.content[0];

        QRCode.toDataURL(state.info.qrcode).then((url) => {
          state.qrCodeUrl = url;
        });

        nextTick(() => {
          AMapLoader.load({
            key: process.env.APP_AMAP_KEY as string,
            version: '2.0',
          })
            .then((AMap) => {
              amap.value = new AMap.Map('amapContainer', {
                zoom: 12,
                center: [state.info.longitude || 119.656831, state.info.latitude || 29.082657],
              });

              const marker = new AMap.Marker({
                position: amap.value.getCenter(),
                size: new AMap.Size(40, 50),
                offset: new AMap.Pixel(-15, -55),
              });

              amap.value.add(marker);
            })
            .catch((error) => {
              window.console.log('--- AMap Error ---', error);
            });
        });
      }, 1000);
    });
  }
});
</script>

<template>
  <view class="visitor-permit app-page--1">
    <view v-if="!state.info.id" class="visitor-permit__auth-msg-wrapper">
      {{ state.authMsg }}
    </view>
    <scroll-view v-else class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-permit__wrapper">
        <view class="visitor-permit__card">
          <view class="visitor-permit__card--header">{{ state.info.orgName || '-' }}</view>
          <view class="visitor-permit__card--body">
            <view class="visitor-permit__card--hr"></view>
            <view class="visitor-permit__name">
              <text>尊敬的</text>
              <text>{{ state.info.personName }}</text>
              <text>{{ state.info.sex ? { 1: '先生', 2: '女士' }[state.info.sex] : '' }}</text>
            </view>
            <image
              class="visitor-permit__qr-code-img"
              v-if="state.qrCodeUrl"
              :src="state.qrCodeUrl"
            />
            <view class="visitor-permit__tip">凭此二维码前往门卫处进行登记</view>
          </view>
        </view>

        <view class="visitor-permit__address-card">
          <view class="visitor-permit__address-card--title">{{ state.info.address || '-' }}</view>
          <view class="visitor-permit__address-card--content">
            {{ state.info.locationAddress || '-' }}
          </view>
          <view id="amapContainer" class="visitor-permit__map">
            <text>地图加载中...</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
